<template>
    <div class="home">
      <el-container>
        <el-header>
          <div class="header-content">
            <h1>房地产信息管理平台</h1>
            <div class="header-actions">
              <el-button v-if="!authStore.isLoggedIn" @click="$router.push('/login')">
                登录
              </el-button>
              <el-button v-if="!authStore.isLoggedIn" @click="$router.push('/register')">
                注册
              </el-button>
              <el-dropdown v-else>
                <span class="user-info">
                  {{ authStore.user?.username }}
                  <el-icon><arrow-down /></el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="$router.push('/dashboard')">
                      个人中心
                    </el-dropdown-item>
                    <el-dropdown-item @click="handleLogout">
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <el-main>
          <div class="welcome-section">
            <h2>欢迎使用房地产信息管理平台</h2>
            <p>为您提供专业的房源信息管理和服务</p>
            <div class="home-actions">
              <el-button type="primary" size="large" @click="$router.push('/properties')">
                浏览房源
              </el-button>
              <el-button size="large" @click="$router.push('/dashboard')" v-if="authStore.isLoggedIn">
                个人中心
              </el-button>
            </div>
          </div>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup>
import { useAuthStore } from '@/store/auth'
import { ElMessage } from 'element-plus'
import { ArrowDown } from '@element-plus/icons-vue'
  
  const authStore = useAuthStore()
  
  const handleLogout = async () => {
    await authStore.logout()
    ElMessage.success('已退出登录')
  }
  </script>
  
  <style scoped>
  .home {
    min-height: 100vh;
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  
  .user-info {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  
  .welcome-section {
    text-align: center;
    padding: 100px 0;
  }
  
  .welcome-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #333;
  }
  
  .welcome-section p {
    font-size: 1.2rem;
    color: #666;
    margin-bottom: 30px;
  }
  
  .home-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
  }
  </style>